<template>
  <transition appear name="slide-fade">
    <div class="list-container">
      <header class="header">
        <router-link to="/rank">
          <img
            class="close-icon"
            src="../../assets/icon/close-white.svg"
            alt="close"
          />
        </router-link>
        <h1 class="heading">参赛证书</h1>
      </header>
      <div class="content">
        <div class="certificate">
          <img src="@/assets/certificate.jpg" alt="certificate" />
          <span class="name">{{ info.name || '其他' }}</span>
          <span class="rank">{{ info.rank }}</span>
          <span class="score">{{ info.score }}</span>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Certificate',
  data() {
    return {
      info: {
        name: '一定是特别的缘分',
        rank: 111,
        score: 666,
      },
    };
  },
  created() {
    this.info = this.$route.params;
    // console.log(this.$route.params);
  },
};
</script>

<style lang="scss" scoped src="./style.scss"></style>
